<script setup lang="ts">
import { systemStore } from '@/stores/modules/system'

import type { BasicSectionProps } from './BasicSection.vue'

const useSystemStore = systemStore()
const domainUrl = computed(() => useSystemStore.domain)
const goToUse = () => {
  window.open(domainUrl.value, '_blank')
}
const props: BasicSectionProps = {
  title: '接入流程',
  description: '简单4步 轻松使用'
}
</script>

<template>
  <basic-section :height="546" id="access-process" v-bind="props">
    <div class="access-process__wrapper">
      <div class="access-process__step">
        <div class="title">
          <span class="mr-2 num">01</span>
          <span class="title-item">开通CDN服务</span>
        </div>
        <p class="desc">
          点击“
          <a-link
            class="underline! underline-offset-4"
            :hoverable="false"
            @click="goToUse"
          >
            免费使用
          </a-link>
          ”，进入CDN控制台，添加需要加速的网站域名。
        </p>
      </div>

      <div class="access-process__step">
        <div class="title">
          <span class="mr-2 num">02</span>
          <span class="title-item">DNS接入</span>
        </div>
        <p class="desc">前往您的域名注册机构，修改域名DNS服务器地址。</p>
      </div>

      <div class="access-process__step">
        <div class="title">
          <span class="mr-2 num">03</span>
          <span class="title-item">站点配置</span>
        </div>
        <p class="desc">
          进入站点页面，根据业务需求，灵活配置站点，调整优化策略。
        </p>
      </div>

      <div class="access-process__step">
        <div class="title">
          <span class="mr-2 num">04</span>
          <span class="title-item">全景监控</span>
        </div>
        <p class="desc">
          全网数据实时采集，流量、请求等报表及分析，实时感知业务健康态势。
        </p>
      </div>

      <div class="access-process__arrow">
        <next-step />
        <next-step />
        <next-step />
      </div>
    </div>
  </basic-section>
</template>

<style scoped lang="less">
.access-process__wrapper {
  @apply grid grid-cols-4 gap-x-4 relative;
  .access-process__step {
    @apply flex flex-col gap-4 rounded-3 bg-white px-12 py-8 items-start relative top-0;
    transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    height: 148px;
    border: 1px solid #e4e9ee;
    .title,
    .desc {
      @apply m-0;
      .num {
        font-size: 24px;
        line-height: 24px;
        vertical-align: middle;
        font-family: 'BebasNeue';
        transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
        color: #41464f;
      }
      .title-item {
        color: #0d0e15;
        transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
      }
    }
    .title {
      font-size: 20px;
      color: #0d0e15;
      font-family: 'PingFang SC medium';
      transition: all 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    .desc {
      color: #41464f;
    }
    &:hover {
      top: -10px;
      box-shadow: 0px 10px 30px 0px rgba(128, 137, 159, 0.1);
      .title {
        .num {
          color: #1562fc;
        }
        .title-item {
          background: linear-gradient(90deg, #1462fc 0%, #07a0ff 100%);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
}

.access-process__arrow {
  @apply h-0 absolute top-1/2 left-1/2 -translate-1/2 flex items-center justify-evenly;
  width: calc(100% - 16px * 3);
  pointer-events: painted;
}
</style>
